<template>
    <div class="home">
        <div class="top-backimg">
            <van-nav-bar
                    :fixed="fixed"
                    title="永乐融华"
                    left-arrow
                    style="background-color:transparent;"
            >
                <div slot="right" @click="onClickRight">
                    <img src="../../static/setting.png" :style="{height:'30px',width: '30px',marginBottom:'-10px'}"/>
                </div>
                <div slot="left" class="title" :style="{height: '46px'}" @click="onClickLeft">
                    <img src="../../static/headicon-white.png" class="img" style="vertical-align: middle;"
                         v-if="user.avatar==''"/>
                    <img :src="'http://api.yyw66.cn/upload/'+user.avatar" class="img" style="vertical-align: middle;"
                         v-if="user.avatar!=''"/>
                    <span style="line-height: 42px;display: inline-block">UID:{{user.id}}</span>
                </div>
            </van-nav-bar>
            <div class="home-top">
                <div class="scan">
                    <img src="../../static/saoyisao.png" @click="saoyisao"/>
                    <br>
                    <p :style="{fontSize:'15px',letterSpacing:'10px'}">扫码支付</p>
                    <ul>
                        <li :style="{borderRight:'1px solid #efefef '}" @click="balance">余额<p>{{user.balance}}</p></li>
                        <li @click="meintegral">积分<p>{{user.score}}</p></li>
                    </ul>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <div :style="{height:imgheight+'px'}">
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <img v-lazy="image.ad_image" width="100%" @click="see(image.ad_link)">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div id="container" v-cloak>
            <ul class="tables">
                <li @click="enter">
                    <!--<img src="../../static/shopping.png"/>-->
                    <van-icon name="after-sale"/>
                    转入
                </li>
                <li @click="turnout">
                    <van-icon name="cash-back-record"/>
                    转出
                </li>
                <li @click="UserSign">
                    <van-icon name="sign"/>
                    签到
                </li>
                <!--<li @click="integral"><img src="../../static/shopping.png"/>兑换积分</li>-->
            </ul>
            <ul class="tables">
                <li @click="Envelopes">
                    <van-icon name="qr"/>
                    邀请码
                </li>
                <!--<li @click="onLocationClick">-->
                <!--<van-icon name="location" />-->
                <!--我的地址-->
                <!--</li>-->
                <!--<li @click="onOrderListClick">-->
                <!--<van-icon name="pending-orders" />-->
                <!--我的订单-->
                <!--</li>-->
                <li @click="InvitationUser">
                    <van-icon name="contact"/>
                    我的邀请
                </li>
                <li @click="MeBonus">
                    <!--<van-icon name="points"/>-->
                    <van-icon name="exchange"/>
                    <!--我的工资-->
                    签到查询
                </li>
            </ul>
            <!--<ul class="tables">-->
            <!--<li @click="InvitationUser">-->
            <!--<van-icon name="contact" />-->
            <!--我的邀请-->
            <!--</li>-->
            <!--<li @click="MeBonus">-->
            <!--<van-icon name="after-sale" />-->
            <!--我的奖金-->
            <!--</li>-->
            <!--<li ></li>-->
            <!--</ul>-->
        </div>
        <van-popup v-model="show" class="sgin">
            <div>
                <img src="../../static/hongbao.png"/>
                <span class="span">{{receive}}</span>
            </div>
        </van-popup>
        <van-popup v-model="usershow" class="sgin">
            <div style="height: 200px;width: 380px;background-color: #eee;text-align: center;">
                <span style="line-height: 150px">发现新版本，请更新！</span>
                <div class="button">
                    <van-button size="large" @click="UserUpLoad">立即更新</van-button>
                </div>
            </div>
        </van-popup>
        <bottom tab="home"></bottom>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {NavBar, Icon, Toast, Popup, Dialog} from 'vant'
    import {Swipe, SwipeItem, Loading} from 'vant';

    Vue.use(Swipe).use(SwipeItem);
    Vue.use(NavBar, Icon, Toast, Popup, Loading, Dialog)
    import bottom from '@/pages/bottom'
    // import UploadList from "element-ui/packages/upload/src/upload-list";
    import {UserSign, Receive, UserInfo, GuangGao, UserVersions} from "../api/data";

    import {Lazyload} from 'vant';
    // options 为可选参数，无则不传
    Vue.use(Lazyload);
    let scan = null;
    export default {
        data() {
            return {
                urlApk: '',
                usershow: false,
                images: [],
                imgheight: '',
                fixed: true,
                selected: '1',
                show: false,
                receive: '',
                user: []
            }
        },
        components: {
            // UploadList,
            bottom
        },
        methods: {
            UserUpLoad() {
                window.location.href = this.urlApk
                this.usershow        = false
            },
            see: function (e) {
                console.log(e)
                //window.location.href =
                this.$router.push({
                    path: '/guang',
                    query: {'url': e}
                })
            },
            MeBonus() {
                // this.$router.push({path: '/mebonus'})
                this.$router.push({path: '/sginquery'})
            },
            InvitationUser() {
                this.$router.push({
                    path: '/invitationuser'
                })
            },
            UserSign() {
                // this.$router.push({path:`/usersign`})
                UserSign().then(res => {
                    console.log(res.data)
                    if (res.data.code == 1) {
                        Receive().then(res => {
                            this.receive = res.data.msg
                        })
                        this.show = true;
                        var that=this;
                        setTimeout(function () {
                            that.show=false;
                        },2000);
                    } else {
                        Toast('你今天已经领取过了，请明天再来！')
                    }
                })
            },
            Envelopes() {
                this.$router.push({path: `/invitation`})
            },
            saoyisao() {
                this.$router.push({
                    path: `/scan`
                })
            },
            onLocationClick() {
                this.$router.push({path: `/address`})
            },
            onOrderListClick() {
                this.$router.push({path: `/myisorder`})
            },
            onClickLeft() {
                this.$router.push({path: `/setuserinfo`})//没有登录跳转登陆页面
            },
            onClickRight() {
                this.$router.push({path: `/me`})
            },
            meintegral() {
                this.$router.push({path: `/integral`})
            },
            balance() {
                this.$router.push({path: `/balance`})
            },
            enter() {
                this.$router.push({path: `/enter`})
                // this.$router.push({path: `/inviterregister`})
            },
            turnout() {
                this.$router.push({path: `/turnout`})
            },
            integral() {
                this.$router.push({path: `/meintegral`})
            },
            versions() {
                let wgtVer = null
                plus.runtime.getProperty(plus.runtime.appid, function (inf) {
                    wgtVer = inf.version;
                    //这里这个wgtVer 就是代表当前的版本号，下面会用到
                    // alert(wgtVer)
                });
            }
        },
        mounted() {//页面加载执行函
            // this.versions();
            UserVersions().then(res => {
                console.log(res.data.data)
                this.urlApk   = res.data.data.url
                this.versions = res.data.data.versions
                let versions  = '1.0.4'
                if (res.data.data.versions != versions) {

                    Dialog.confirm({
                        title: '版本更新',
                        message: '发现新版本，请立即更新！',
                        confirmButtonText: '立即更新'
                    }).then(() => {
                        //window.location.href = this.urlApk

                        var waitingDialog = plus.nativeUI.showWaiting("开始下载应用...");
                        var downloadTask  = plus.downloader.createDownload(this.urlApk, {filename: "_downloads/"}, function (d, status) {
                            if (status == 200) {
                                console.log("下载应用文件：" + d.filename);
                                console.log("下载应用文件：" + d.filename);
                                plus.runtime.install(d.filename); // 安装wgt包
                            } else {
                                console.log("下载应用文件失败！");
                                plus.nativeUI.alert("下载文件失败！");
                            }
                            plus.nativeUI.closeWaiting();
                        });
                        downloadTask.start();
                        downloadTask.addEventListener("statechanged", function (download, status) {
                            waitingDialog.setTitle('正在下载应用...'+parseInt(download.downloadedSize / download.totalSize * 100) + '% ');
                        }, false);

                    }).catch(() => {
                        console.log("")
                    });
                } else {
                    this.usershow = false
                    console.log('没有发现新版本')
                }
            })
            this.imgheight = document.documentElement.clientWidth / 640 * 90
            let versions   = '1.1.0'
            UserInfo(versions).then(res => {
                if (res.data.code == '10001') {
                    Toast('登录已失效，请重新登录！')
                    this.$router.push({path: `/login`})
                    localStorage.removeItem('token')
                    return
                }
                this.user = res.data.data
                console.log("到这里了")
                console.log(this.user)
            })
            GuangGao().then(res => {
                console.log(res.data.data.widgets.center_ad.vars.ads)
                this.images = res.data.data.widgets.center_ad.vars.ads
            })
        }
    };
</script>
<style>
    .van-dialog__message {
        text-align: center;
    }

    .van-dialog__confirm, .van-dialog__confirm:active {
        color: #38f;
    }
</style>
<style scoped>
    .button {
        width: 100%;
        height: 50px;
        position: absolute;
        bottom: 0px;
    }

    .top-backimg .van-hairline--bottom::after {
        border-bottom: none;
    }

    .sgin {
        background-color: transparent;
    }

    .top-backimg {
        color: #fff;
        background-image: url("../../static/homeimg.jpg");
    }

    .van-nav-bar__title {
        font-size: 18px;
    }

    .span {
        width: 100%;
        height: 50px;
        position: absolute;
        top: 60px;
        font-size: 19px;
        text-align: center;
        color: #fff;
    }

    .img {
        width: 36px;
        height: 36px;
        margin-top: 1px;
        border-radius: 22px;
    }

    body {
        margin: 0;
        padding-top: 30px;
        background: #f3f6f8;
    }

    .home {
        width: 100%;
        height: 100%;
        /*background-color: #E0E0E0;*/
    }

    .home-top {
        width: 100%;
        padding: 15px 20px;
        /*background-color: blue;*/
    }

    .tables {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex: 3;
    }

    .tables li {
        border: 1px #eeeeee solid;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex: 1;
        font-size: 16px;
        font-style: normal;
    }

    .tables li:active {
        background: #eee;
    }

    .tables li img {
        width: 30px;
    }

    .tables li {
        border-right: none;
        border-bottom: none;
    }

    .tables li:first-child {
        border-left: none;
    }

    [v-cloak] {
        display: none;
    }

    #container {
        background: white;
        min-width: 320px;
        margin-bottom: 60px;
    }

    #container .tables:last-child li {
        border-bottom: 1px #eeeeee solid;
    }

    .scan li {
        height: 60px;
        margin-top: 8px;
        float: left;
        width: 49%;
        list-style: none;
    }

    .scan {
        margin-top: 46px;
        text-align: center;
        width: 100%;
    }

    .scan img {
        width: 100px;
        height: 100px;
    }

    .user-portrait img {
        width: 36px;
        height: 35px;
        border-radius: 25px;
    }

    .home-top-title p {
        line-height: 23px;
        float: left;
    }

    .home-top-title img {
        width: 45px;
        height: 45px;
    }

    .tables .van-icon {
        color: #f44;
        font-size: 32px;
    }

</style>
